<template>
	<div id="auth_1">
		<div class="top-wrapper">
			<span class="icon"> <i class="el-icon-s-fold"></i> </span>
			<div class="router-wrapper">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: '/' }"
						>首页</el-breadcrumb-item
					>
					<el-breadcrumb-item
						><a href="/">活动管理</a></el-breadcrumb-item
					>
					<el-breadcrumb-item>活动列表</el-breadcrumb-item>
					<el-breadcrumb-item>活动详情</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div>

		<div class="main-wrapper">
			<div class="mid-wrapper">
				<div class="search-top">
					<span class="search-tip">
						<i class="el-icon-search"></i>
						筛选搜索
					</span>

					<div class="btn-wrapper">
						<el-button type="info" size="mini">重置</el-button>
						<el-button type="primary" size="mini"
							>查询搜索</el-button
						>
					</div>
				</div>
				<div class="search-box">
					<label for="search">输入搜索:</label>
					<el-input
						id="search"
						v-model="input"
						size="mini"
						style="width:200px"
						placeholder="请输入内容"
					></el-input>
				</div>
			</div>

			<div class="tip-wrapper">
				<span> <i class="el-icon-tickets"></i> 数据列表</span>
				<span class="btn">添加</span>
			</div>

			<div class="table-wrapper">
				<el-table
					:data="admins"
					border
					style="width: 100%"
					header-align="center"
				>
					<el-table-column
						align="center"
						fixed
						prop="id"
						label="编号"
						width="50"
					>
					</el-table-column>
					<el-table-column
						align="center"
						prop="userName"
						label="账号"
						width="120"
					>
					</el-table-column>
					<el-table-column
						align="center"
						prop="nickName"
						label="姓名"
						width="120"
					>
					</el-table-column>
					<el-table-column
						align="center"
						prop="email"
						label="邮箱"
						width="150"
					>
					</el-table-column>
					<el-table-column
						prop="createTime"
						label="添加时间"
						width="175"
						align="center"
					>
					</el-table-column>
					<el-table-column
						prop="loginTime"
						label="最后登录"
						width="180"
						align="center"
					>
					</el-table-column>
					<el-table-column align="center" label="是否启用" width="80">
						<template slot-scope="scope">
							<el-switch
								v-model="scope.row.status"
								active-color="#13ce66"
								inactive-color="#ff4949"
							>
							</el-switch>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						fixed="right"
						label="操作"
						width="150"
					>
						<template slot-scope="scope">
							<el-button
								type="text"
								size="small"
								@click="selectRole = true"
								>分配角色</el-button
							>
							<el-button type="text" size="small">查看</el-button>
							<el-button
								type="text"
								size="small"
								@click="selectAdmin(scope.row)"
								>编辑</el-button
							>
						</template>
					</el-table-column>
				</el-table>

				<div class="page-wrapper">
					<el-pagination
						:current-page="currentPage"
						:page-sizes="[100, 200, 300, 400]"
						:page-size="100"
						layout="total, sizes, prev, pager, next, jumper"
						:total="400"
						small
					>
					</el-pagination>
				</div>
			</div>

			<el-dialog title="编辑用户" :visible.sync="showEdit" width="30%">
				<div class="edit-wrapper">
					<el-form
						ref="form"
						:model="form"
						label-width="80px"
						size="small"
					>
						<el-form-item label="账号:">
							<el-input v-model="form.userName"></el-input>
						</el-form-item>

						<el-form-item label="姓名:">
							<el-input v-model="form.nickName"></el-input>
						</el-form-item>

						<el-form-item label="邮箱:">
							<el-input v-model="form.email"></el-input>
						</el-form-item>

						<el-form-item label="密码:">
							<el-input v-model="form.password"></el-input>
						</el-form-item>

						<el-form-item label="备注:">
							<el-input
								type="textarea"
								v-model="form.note"
							></el-input>
						</el-form-item>

						<el-form-item label="是否启用:" prop="resource">
							<el-radio-group v-model="form.status">
								<el-radio label="是"></el-radio>
								<el-radio label="否"></el-radio>
							</el-radio-group>
						</el-form-item>
					</el-form>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="showEdit = false"
						>取 消</el-button
					>
					<el-button
						size="mini"
						type="primary"
						@click="showEdit = false"
						>确 定</el-button
					>
				</span>
			</el-dialog>

			<el-dialog title="分配角色" :visible.sync="selectRole" width="30%">
				<div class="edit-wrapper">
					<el-select
						v-model="value"
						style="width:80%"
						placeholder="请选择"
						size="small"
					>
						<el-option
							v-for="item in roles"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="selectRole = false"
						>取 消</el-button
					>
					<el-button
						size="mini"
						type="primary"
						@click="selectRole = false"
						>确 定</el-button
					>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import authApi from '@/api/auth'
export default {
	name: 'auth_1',
	data() {
		return {
			roles: [
				{
					value: '1',
					label: '商品管理员',
				},
				{
					value: '2',
					label: '订单管理员',
				},
				{
					value: '3',
					label: '超级管理员',
				},
				{
					value: '4',
					label: '测试角色',
				},
			],
			form: {},
			value: '',
			input: '',
			showEdit: false,
			selectRole: false,
			currentPage: 1,
			admins: [],
		}
	},
	methods: {
		selectAdmin(admin) {
			this.showEdit = true
			this.form = admin
		},
	},
	mounted() {
		authApi.getAdminList().then((res) => {
			this.admins = res.response
		})
	},
	components: {},
}
</script>

<style scoped lang="less">
#auth_1 {
	.top-wrapper {
		display: flex;
		height: 30px;
		align-items: center;
		border-bottom: 1px solid #e4e7ed;
		.icon {
			margin: 0 8px;
		}
	}
	.main-wrapper {
		margin: 20px;
		.mid-wrapper {
			padding: 20px;
			border: 1px solid #e4e7ed;
			border-radius: 5px;
			.search-top {
				display: flex;
				width: 100%;
				height: 30px;
				justify-content: space-between;
				align-items: center;
				.search-tip {
					font-size: 14px;
				}
			}
			.search-box {
				margin-top: 10px;
				padding-left: 100px;
				margin-bottom: 20px;
				label {
					font-size: 14px;
					margin-right: 10px;
				}
			}
		}

		.tip-wrapper {
			border: 1px solid #e4e7ed;
			border-radius: 5px;
			display: flex;
			height: 35px;
			margin: 20px 0;
			align-items: center;
			justify-content: space-between;
			padding: 10px 15px;
			font-size: 14px;
			.btn {
				border: 1px solid #e4e7ed;
				font-size: 12px;
				padding: 5px 10px;
				border-radius: 5px;
				cursor: pointer;
			}
		}

		.table-wrapper {
			.page-wrapper {
				width: 100%;
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}
	}
}
</style>
